<script setup lang="ts">
import {onMounted, ref} from "vue";
import SvgIcon from "../Tool/svg-icon.vue";
import LineList from "./lineList.vue";
import {MusicContent, MusicListApi, MusicSrc, getMusicSrc} from './index.ts'
import Music from "./music.vue";

const search = ref('')
const baseUrl = 'https://app.c.nf.migu.cn/pc/bmw/rank/rank-info/v1.0?rankId='
const hotId = '27186466'
const newId = '27553319'
const yuanId = '27553408'
let listApi: MusicListApi | null = null
const srcList = ref<Array<MusicSrc>>([])


onMounted(async () => {
    listApi = new MusicListApi(baseUrl, hotId)

    // const hotList = await listApi.getMusicList() as Array<MusicContent>
    // for (const item of hotList) {
    //     const res = await getMusicSrc(item.copyrightId, item.resId)
    //     const data = {
    //         song: item.txt,
    //         singer: item.txt2,
    //         picture: item.img,
    //         src: res,
    //         time: formatTime(JSON.parse(item.songData).duration)
    //     } as MusicSrc
    //     srcList.value.push(data)
    // }
    console.log(srcList.value)
})

const formatTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}

</script>

<template>
    <el-card style="height: 60px; margin-bottom: 8px;" body-style="height: 60px; padding: 0;">
        <el-row>
            <el-col :span="6" style="height: 60px; display: flex; justify-content: center; align-items: center">
                <el-text tag="b" size="large" style="font-size: 30px">音乐在线</el-text>
            </el-col>
            <el-col :span="18" style="height: 60px; display: flex; justify-content: end; align-items: center">
                <el-input
                    v-model="search"
                    style="width: 300px; margin-right: 20px"
                    size="large"
                    placeholder="输入歌曲名称或歌手名称"
                >
                    <template #suffix>
                        <SvgIcon name="search"/>
                    </template>
                </el-input>
            </el-col>
        </el-row>
    </el-card>
    <el-card style="height: calc(100% - 72px); position:relative;">
        <el-row :gutter="8">
            <el-col :span="8">
                <el-card class="bang" style="width: 100%" body-style="width: 100%; padding: 0;">
                    <el-text tag="b" size="large" style="width: 100%; font-size: 25px; text-align: center">新歌榜</el-text>
                    <line-list/>
                    <line-list/>
                    <line-list style="margin-bottom: 10px;"/>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="bang" style="width: 100%" body-style="width: 100%; padding: 0;">
                    <el-text tag="b" size="large" style="width: 100%; font-size: 25px; text-align: center">热歌榜</el-text>
                    <line-list/>
                    <line-list/>
                    <line-list style="margin-bottom: 10px;"/>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="bang" style="width: 100%" body-style="width: 100%; padding: 0;">
                    <el-text tag="b" size="large" style="width: 100%; font-size: 25px; text-align: center">原创榜</el-text>
                    <line-list/>
                    <line-list/>
                    <line-list style="margin-bottom: 10px;"/>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="8">
            <el-col :span="8">
                <el-card class="bang" style="width: 100%" body-style="width: 100%; padding: 0;">

                </el-card>
            </el-col>
        </el-row>
        <music class="music" :data="srcList" />
    </el-card>
</template>

<style scoped lang="css">
.bang {
    width: 100%;
    background-color: #2BD2FF;
    display: flex;
    justify-content: center;
}

.music {
    width: calc(100% - 40px);
    border-top: 1px solid #e9ebf0;
    position: absolute;
    right: 20px;
    left: 20px;
    bottom: 10px;
}
</style>